<template>
  <BasicDrawer v-bind="$attrs" title="" width="100%" @register="registerDrawer">
<!--    <YcPdDeviceReplaceListForm></YcPdDeviceReplaceListForm>-->
      <!-- 自定义表单 -->
      <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px">
        <template #formHeader>
        </template>
        <template #formFooter>
          <div style="margin: 0 auto">
            <a-button type="primary" @click="save" class="mr-2"> 保存 </a-button>
          </div>
        </template>
      </BasicForm>
    <!--定义表格-->
    <BasicTable @register="registerTable">
      <!--操作栏-->
<!--      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>-->
    </BasicTable>

  </BasicDrawer>
</template>
<script lang="ts" setup>
import YcPdDeviceList from "@/views/yc/deviceReplace/YcPdDeviceList.vue";
import { BasicDrawer,useDrawerInner } from '/@/components/Drawer';
import YcPdDeviceReplaceListForm from "@/views/yc/deviceReplace/components/YcPdDeviceReplaceListForm.vue";
//引入依赖
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import {list} from '@/views/yc/deviceReplaceRecords/YcDeviceReplaceRecords.api';
import {defHttp} from "@/utils/http/axios";
import {searchFormSchema} from "@/views/yc/device/YcPdDevice.data";
//自定义表单字段
const formSchemas: FormSchema[] = [
  {
    field: 'id',
    label: '编号',
    component: 'Input',
    //隐藏id，css 控制，不会删除 dom（支持布尔类型 true和false。支持动态值判断，详情请见ifShow）
    show: false,
  },
  {
    label: '当前传感器名称',
    field: 'name',
    component: 'Input',
    dynamicDisabled: true,
  },
  {
    label: '当前传感器编号',
    field: 'no',
    component: 'Input',
    dynamicDisabled:true
   /* //填写组件的属性
    componentProps: {
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
        { label: '未知', value: 3 },
      ],
    },
    //默认值
    defaultValue: 3,*/
  },
  {
    label: '新传感器名称',
    subLabel: '( 选填 )',
    field: 'newDeviceName',
    component: 'Input',
    dynamicRules: ({model,schema}) => {
      return [
        { required: false, message: '请输入设备名称!'},
        { pattern: /^.{6,16}$/, message: '请输入6到16位任意字符!'},
      ];
    },
  },
  {
    label: '新传感器编号',
    field: 'newDeviceNo',
    component: 'Input',
    dynamicRules: ({model,schema}) => {
      return [
        {required: true, message: '请输入4位编号!',pattern: /^[0-9A-Za-z]{4}$/},
      ];
    },
  },

];

/**
 * BasicForm绑定注册;
 */
const [registerForm, {setFieldsValue,validate, resetFields ,getFieldsValue}] = useForm({
  schemas: formSchemas,
  //隐藏操作按钮
  showActionButtonGroup: false,
  alwaysShowLines: 2,
  baseColProps: { span: 12 },
});

/**
 * 保存
 */
async function save() {
  //使用useForm方法获取表单值
  let values = await validate();
/*  alert(JSON.stringify(values))
  let data = getFieldsValue();
  alert(JSON.stringify(data))*/
  let params = Object.assign({}, values);
  console.log('表单数据', params)
  await defHttp.post({url: "/yc/web/ycBusiness/replaceDevice", params}).then(()=>{
    reload();
    closeDrawer();
  });

}

/**
 * 保存草稿
 */
async function saveDraft() {
  //使用useForm方法validate获取表单值
  let values = await validate();
  console.log(values);
}

/**
 * 重置
 */
async function reset() {
  //使用useForm方法resetFields清空值
  await resetFields();
}
//定义表格列字段
const columns: BasicColumn[] = [
  {
    title: '旧传感器名称',
    dataIndex: 'oldDeviceName',
    key: 'oldDeviceName',
  },
  {
    title: '旧传感器编号',
    dataIndex: 'oldDeviceNo',
    key: 'oldDeviceNo',
  },
  {
    title: '新传感器名称',
    dataIndex: 'oldDeviceName',
    key: 'oldDeviceName',
  },
  {
    title: '新传感器编号',
    dataIndex: 'oldDeviceNo',
    key: 'oldDeviceN0',
  },
  {
    title: '更换时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
];
/** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
 * 平台通过此封装，简化了代码，支持自定义扩展*/
  // 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
const { tableContext } = useListPage({
    designScope: 'basic-table-demo',
    tableProps: {
      title: '更换记录',
      api: list,
      columns: columns,
      size: 'small',
      showActionColumn: false,
      beforeFetch: (params) => {
        params.replaceDeviceId = formData.id
      },
    },
  });
// BasicTable绑定注册
const [registerTable,{reload}] = tableContext;
/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    },
  ];
}

function handleEdit(record) {
  console.log(record);
}
let formData = {};
const [registerDrawer,{closeDrawer}] = useDrawerInner(async (data) => {
  //表单赋值
  formData = {...data}
  //设置表单的值
  await setFieldsValue(formData);
})


</script>

<style scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-picker) {
  width: 100%;
}
</style>
